<script setup lang="ts">
import { reactive, ref } from 'vue'
const current = ref(0)

const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No.189，Grove St,Los Angeles',
  }, {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No.189，Grove St,Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No.189,Grove St,Los Angeles',
  }, {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No.189,Grove St,Los Angeles',
  }
]

const formData = reactive({
  username: '',
  password: '',
})
</script>

<template>
  <!--容器  -->
  <el-container>
    <!-- 侧边栏 -->
    <el-aside width="200px">
      <el-menu :default-active="current" mode="vertical">
        <el-menu-item index="1">
          <el-icon>
            <message />
          </el-icon>
          工作台</el-menu-item>
        <el-sub-menu index="2">
          <template #title><el-icon>
              <House />
            </el-icon>园区管理</template>
          <el-menu-item index="2-1">楼宇管理</el-menu-item>
          <el-menu-item index="2-2">企业管理</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="3">
          <template #title><el-icon>
              <setting />
            </el-icon>行车管理</template>
          <el-menu-item index="3-1">区域管理</el-menu-item>
          <el-menu-item index="3-2">月卡管理</el-menu-item>
          <el-menu-item index="3-3">停车缴费管理</el-menu-item>
          <el-menu-item index="3-4">计费规则管理</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="4">
          <template #title>物业费管理</template>
        </el-sub-menu>
        <el-sub-menu index="5">
          <template #title>一体杆管理</template>
          <el-menu-item index="5-1">1</el-menu-item>
          <el-menu-item index="5-2">2</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="6">
          <template #title>系统管理</template>
          <el-menu-item index="6-1">4</el-menu-item>
          <el-menu-item index="6-2">3</el-menu-item>
        </el-sub-menu>
      </el-menu>

    </el-aside>
    <!--容器  -->
    <el-container>
      <!-- 头部 -->
      <el-header>
        <!-- 下拉菜单 -->
        <el-dropdown>
          <span class="el-dropdown-link">
            标题
          </span>
          <!-- 菜单插槽 -->
          <template #dropdown>
            <!--  菜单组 -->
            <el-dropdown-menu>
              <!-- 菜单项 -->
              <el-dropdown-item>1</el-dropdown-item>
              <el-dropdown-item>2</el-dropdown-item>
              <el-dropdown-item>3</el-dropdown-item>
              <!-- disabled禁用 -->
              <el-dropdown-item disabled>4</el-dropdown-item>
              <!-- divided分割线 -->
              <el-dropdown-item divided>5</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-header>
      <!-- 主题 -->
      <el-main>
        <!-- stripe斑马文 -->
        <el-table :data="tableData" border stripe>
          <el-table-column prop="date" label="日期"></el-table-column>
          <el-table-column prop="name" label="名字"></el-table-column>
          <el-table-column prop="address" label="地址"></el-table-column>
        </el-table>
        <el-divider></el-divider>
        <el-divider></el-divider>
        <el-form :model="formData">
          <el-form-item label="账号">
            <el-input v-model="formData.username" placeholder="请输入账号"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="formData.password" type="password" placeholder="请输入密码"></el-input>
          </el-form-item>
        </el-form>
        <el-form-item>
          <el-checkbox>记住我</el-checkbox>
        </el-form-item>
        <el-form-item>
          <el-button type="primary">登录</el-button>
          <el-button>重置</el-button>
        </el-form-item>
      </el-main>
      <!-- 页脚 -->
      <el-footer>footer</el-footer>
    </el-container>
  </el-container>
</template>
<style>
.body {
  background-color: pink;
}
</style>